﻿#include('../../header.html', {title: '视频播放学习', isShow: true})

<style>
  .spread {
    transition: right .6s;
  }
</style>
<div id="task-show-vp">
  <div id="taskEndModal" class="modal">
    <div class="modal-dialog task-state-modal task-finish-modal modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="cd-icon cd-icon-close"></i>
          </button>
          <h4 class="modal-title">
            <i class="es-icon es-icon-iccheckcircleblack24px color-success mrs" style="font-size:20px"></i>
            完成任务
          </h4>
        </div>
        <div class="modal-body">
          <div class="content">
            <div class="content-title">
              恭喜完成
              <b class="mlm">《 {{task.name}} 》</b>
            </div>
            <div class="progress progress-radius progress-md content-progress">
              <div class="progress-bar progress-bar-left progress-bar-success " role="progressbar" aria-valuenow="6"
                   aria-valuemin="0" aria-valuemax="100"
                   :style="'width:'+learnInfo.rate+'%;min-width: 15%;'">
                {{learnInfo.rate}}%
              </div>
            </div>
            <span class="color-success">
                恭喜你！已完成了整个课程的{{learnInfo.rate}}%！
            </span>
          </div>
        </div>
        <div v-if="learnInfo.rate < 100" class="modal-footer">
          <a class="btn btn-primary" :href="nextTaskUrl">下一任务</a>
        </div>
      </div>
    </div>
  </div>

  <div class="task-dashboard-page js-task-dashboard-page">
    <div class="dashboard-content spread" id="dashboard-content">
      <div class="dashboard-header">
        <a class="back-link" href="/course/${kid}/join/info">
          <i class="es-icon es-icon-chevronleft"></i>返回课程
        </a>
        任务{{task.index_}}：{{task.name}}
      </div>

      <div class="dashboard-body">
        <div class="all-wrapper">
          <!--课程播放区-->
          <iframe :src="iframeSrc"
                  width="100%" height="100%" frameborder="0" allowfullscreen>
          </iframe>
        </div>
      </div>
      <!--任务完成调用的模态框-->
      <div class="dashboard-footer">
        <div class="state-opration js-state-opration" data-learnmode="freeMode">
          <a class="btn btn-gray text-sm hidden-xs js-learn-prompt open" href="javascript:" data-toggle="popover"
             data-trigger="hover" data-placement="top"
             :data-content="'<p class=&quot;gray-darker mbs&quot;>满足以下条件:</p>'+taskGoal">
            <i class="es-icon es-icon-help mrs text-md"></i>任务完成条件
          </a>
        </div>
        <a @click="learnEnd" href="javascript:" :class="'btn btn-transparent btn-learn js-btn-learn ' + isEnd">
          <i class="es-icon es-icon--check-circle done"></i>
          <i class="es-icon es-icon-undone-check doing"></i>
          学过了
        </a>
      </div>
    </div>
    <div class="dashboard-sidebar hidden-xs spread" id="dashboard-sidebar" style="display: block; right: -360px;">
      <div class="dashboard-toolbar">
        <ul class="dashboard-toolbar-nav" id="dashboard-toolbar-nav">
          <li data-plugin="menu" data-url="/course/39/task/275/plugin/task_list?preview=0">
            <a @click="loadMenu" href="javascript:">
              <div class="mbs es-icon es-icon-menu"></div>
              目录</a>
          </li>
          <li data-plugin="note" data-url="/course/39/task/275/plugin/note?preview=0">
            <a href="javascript:">
              <div class="mbs es-icon es-icon-edit"></div>
              笔记</a>
          </li>
          <li data-plugin="ask" data-url="/course/39/task/275/plugin/threads?preview=0">
            <a href="javascript:">
              <div class="mbs es-icon es-icon-help"></div>
              问答</a>
          </li>
        </ul>
      </div>

      <!--目录-->
      <div id="menu" class="task-list-pane js-sidebar-pane ps-container">
        <div class="task-list-pane-body js-sidebar-pane-body">
          <div>
            <ul class="task-list task-show infinite-container">
              <task-li v-for="(task, index) in menu.tasks"
                       :task="task" :index="index" :key="index"/>
            </ul>
          </div>
        </div>
      </div>

      <!--写笔记-->
      <div id="note" class="note-pane js-sidebar-pane ps-container hide">
        <div class="note-pane-body js-sidebar-pane-body">
          <form onclick="return false;" method="post" action="">
            <div class="form-group note-content">
              <div class="controls" style="height: calc(100vh - 85px);">
                <textarea class="form-control" rows="10" placeholder="写下你的笔记..." v-model="note.content">
                </textarea>
              </div>
            </div>
            <div class="form-group note-actions">
              <div class="controls clearfix">
                <button id="note-save-btn" class="btn btn-primary pull-right" @click="publishNote" type="submit">保存笔记</button>
                <p class="color-gray mt10 text-right" data-role="saved-message"></p>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!--提问-->
      <div id="ask" class="question-pane js-sidebar-pane ps-container hide">
        <div class="question-pane-body js-sidebar-pane-body">
          <div class="question-list-block">
            <form onclick="return false;" class="task-question-plugin-form" method="post"
                  action="">
              <div class="form-group mb0">
                <div class="controls">
                  <input type="text" id="question_title" required="required"
                         class="form-control expand-form-trigger" placeholder="我要提问" data-display="标题"
                         v-model="publish_ask.title" autocomplete="off">
                </div>
              </div>
              <div class="form-group js-detail-form-group mtm hide">
                <div class="controls">
                  <textarea required="required" class="form-control" id="question_content"
                            rows="5" placeholder="详细描述你的问题" v-model="publish_ask.content"></textarea>
                </div>
              </div>
              <div class="form-group js-detail-form-group mtm hide">
                <div class="controls clearfix">
                  <button class="btn btn-primary btn-sm pull-right" type="submit" @click="publishAsk">提问</button>
                  <button class="btn btn-link btn-sm collapse-form-btn pull-right" type="button">取消</button>
                </div>
              </div>
            </form>
            <!--历史提问-->
            <ul class="media-list thread-list-small" data-role="list">

              <li class="media thread-item" v-for="(ask, index) in asks">
                <div class="media-body thread-item-body">
                  <div class="mbm">
                    <a :href="'/course/'+ask.course.id+'/join/info?wid='+ask.id" class="js-redirect-question-detail">
                      <span class="title-icon"><i class="es-icon es-icon-help mrm"></i></span>
                      {{ask.title}}
                    </a>
                  </div>
                  <div class="metas">
                    <a class="link-dark link-dark mll" :href="'/user/'+ask.user.id+'/home'" target="_blank">{{ask.user.username}}</a>
                    {{ask.time}}
                    <span class="bullet">•</span>
                    <a href="#">{{ask.results}}回答</a>
                  </div>
                </div>
              </li>

              <nav v-if="ask_page.totalPages>1" class="text-center">
                <navigation :pages="ask_page.totalPages" :current.sync="ask_page.pageNum" @navpage="gotoPage"/>
              </nav>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="task-li">
  <!--es-icon-undone-check 空 es-icon-doing 3/4 es-icon-iccheckcircleblack24px 全-->
  <li :class="'task-item task-content mouse-control infinite-item ' + isActive()">
    <i :class="'es-icon color-primary left-menu ' + getRate()"></i>
    <a class="title" :href="getUrl()">
      任务{{task.index_}}： {{task.name}}
    </a>
    <span class="right-menu">
      <time>{{toTime()}}</time>
      <i class="es-icon es-icon es-icon-videoclass ml5" title="视频任务"></i>
    </span>
  </li>
</template>
<script>
    var components = {
        'task-li': {
            props: ['task', 'index'],
            template: '#task-li',
            methods: {
                getUrl: function() {
                    if (this.isActive()==="") {
                        return '/course/'+this.task.courseId+'/task/'+this.task.id+'/show';
                    } else return "javascript:";
                },
                isActive: function() {
                    if (this.$root.task.id === this.task.id) {
                        return 'active';
                    } else
                        return "";
                },
                toTime: function () {
                    var m = parseInt(this.task.duration / 60);
                    var mm = this.task.duration % 60;
                    return '时长: ' + m + ":" + mm;
                },
                getRate: function () {
                    if (this.task.learnTask == null) {
                        return 'es-icon-undone-check'
                    } else {
                        var rate = this.task.learnTask.rate;
                        if (rate <= 0) {
                            return 'es-icon-undone-check';
                        } else if (rate >= 100) {
                            return 'es-icon-iccheckcircleblack24px';
                        } else {
                            return 'es-icon-doing';
                        }
                    }
                }
            }
        }
    };

    var TSVM = new Vue({
        el: '#task-show-vp',
        components: components,
        data: {
            kid: ${kid},
            task: {},
            learnInfo: {rate: 0, nextTask: {}},
            note: {
                content: ''
            },
            publish_ask: {
              content: '',
              title: ''
            },
            asks: [],
            menu: {
              pageNum: 1,
              totalPages: 1,
              tasks: []
            },
            ask_page: {
              pageNum: 1,
              totalPages: 1,
              limit: 8
            }
        },
        watch: {
          'ask_page.pageNum': function (nv) {
            this.getAskPage();
          }
        },
        computed: {
            nextTaskUrl: function () {
                var task = this.learnInfo.nextTask;
                if (task != null && task.id != null) {
                    return '/course/' + task.courseId + '/task/' + task.id + '/show';
                } else
                    return '';
            },
            isEnd: function () {
                if (this.task.learnTask != null && this.task.learnTask.rate >= 100) {
                    return ' active'
                } else
                    return ''
            },
            iframeSrc: function () {
                if (this.task.materialId != null) {
                    // if (this.task.type === 0) {
                    return '/course/${kid}/task/${tid}/video?wid=' + this.task.materialId;
                    // }
                }
                return '';
            },
            taskGoal: function () {
                if (this.task.goal != null) {
                    if (this.task.goal == 0) {
                        return '学习到最后。';
                    } else {
                        return '观看至少' + parseInt(this.task.minTime / 60) + "分钟。";
                    }
                }
            }
        },
        methods: {
            publishAsk: function () {
              var vm = this;
              if (vm.publish_ask.title == '') {
                layer.msg('请填写问题标题!', {
                  time: 1500
                });
                $('#question_title').focus();
                return false;
              }
              if (vm.publish_ask.content == '') {
                layer.msg('请填写问题内容!', {
                  time: 1500
                });
                $('#question_content').focus();
                return false;
              }
              $.post('/course/ask/api/${kid}/join/info/add',
                  {title: vm.publish_ask.title, content: vm.publish_ask.content, taskId: vm.task.id, teaId: vm.task.course.userId}, function (data) {
                    if (data.success) {
                      vm.publish_ask.title = '';
                      vm.publish_ask.content = '';
                      layer.msg('添加成功!', {
                        time: 1500
                      });
                      if (vm.asks.length < vm.ask_page.limit) {
                        vm.asks.push(data.payload);
                      }
                      vm.getAskPage();
                    }
                  })
            },
            getAskPage: function () {
              var self = this;
              $.post('/course/ask/api/${kid}/join/getAskByKidWid', {tid: self.task.id, page: self.ask_page.pageNum}, function (data) {
                if (data.success) {
                  self.asks = [];
                  self.asks = data.payload.rows;
                  self.ask_page.pageNum = data.payload.pageNum;
                  self.ask_page.totalPages = data.payload.totalPages;
                }
              })
            },
            gotoPage: function (page) {
              this.ask_page.pageNum = page;
            },
            loadMenu: function () {
                var self = this;
                if (self.menu.tasks.length <= 0) {
                    $.post('/course/task/api/' + this.kid + '/page', {status: 1, page: this.menu.pageNum}, function (data) {
                        if (data.success) {
                            data.payload.rows.forEach(function (val, i) {
                                self.menu.tasks.push(val);
                            });
                        }
                    });
                }
            },
            learnEnd: function () { // 标记学完本节课程
                var self = this;
                if (self.task.learnTask != null && self.task.learnTask.id > 0) {
                    if (self.task.learnTask.rate < 100) {
                        var ltid = self.task.learnTask.id;
                        var time = self.task.duration;
                        $.post('/course/task/api/${kid}/updateTime/' + ltid, {t: time, r: 100}, function (data) {
                            if (data.success) {
                                self.task.learnTask.rate = 100;
                                if (self.menu.tasks.length > 0) {
                                    self.menu.tasks[self.task.index_ - 1].learnTask.rate = 100;
                                }
                                self.showTaskEndModal();
                            }
                        });
                    } else {
                        self.showTaskEndModal();
                    }
                }
            },
            showTaskEndModal: function () {
                var self = this;
                if (self.learnInfo.id == null) {
                    $.post('/course/learn/api/one', {kid: self.kid}, function (data) {
                        if (data.success) {
                            self.learnInfo = data.payload;
                        } else {
                            console.log(data.msg);
                        }
                    });
                }
                $('#taskEndModal').modal('show')
            },
            publishNote: function () {
                var self = this;
                $.post('/note/${kid}/${tid}/publishNote', {content: self.note.content}, function (data) {
                    if (data.success) {
                        layer.msg('添加成功!', {
                            time: 1500
                        })
                    }
                })
            }
        },
        created: function () {
            var self = this;
            $.post('/course/task/api/${kid}/one/${tid}', {join: true}, function (data) {
                if (data.success) {
                    self.task = data.payload;
                    self.getAskPage();
                } else {
                    console.log("ERROR: " + data.msg);
                }
            });
            $.post('/note/${kid}/${tid}/showNote',function (data) {
                if(data.success){
                    self.note.content=data.payload.rows[0].content;
                }else{
                    console.log("ERROR:"+data.msg);
                }
            });
        },
        mounted: function () {
          $("[data-toggle='popover']").popover({html: true});
        }
    });

    // 侧边抽屉
    var $content = $('#dashboard-content');
    var $side = $('#dashboard-sidebar');
    var isShow = false;

    function showSide() {
        $side.css('right', '0');
        $content.css('right', '395px');
        isShow = true;
    }

    function hideSide() {
        $side.css('right', '-360px').find('.dashboard-toolbar li.active').removeClass('active');
        $content.css('right', '35px');
        isShow = false;
    }

    $('#dashboard-sidebar .dashboard-toolbar-nav > li').click(function (e) {
        var $li = $(this);
        var tab = $li.data("plugin");
        if ($li.hasClass('active')) {
            hideSide();
        } else {
            $('.js-sidebar-pane').addClass("hide");
            $("#" + tab).removeClass("hide");

            if (isShow) {
                $li.parents('ul').find('li.active').removeClass('active');
            } else {
                showSide();
            }
            $li.addClass('active');
        }
    });

    $("#ask").on('focus', '#question_title', function (e) {
        $("#ask .js-detail-form-group").removeClass("hide");
    });
    $(".collapse-form-btn").click(function (e) {
        $("#ask .js-detail-form-group").addClass("hide");
    });
</script>
#include('../../footer.html', {isShow: true})
